<!--
 * @Descripttion: 
 * @Author: zhangchong zc16607@gmail.com
 * @Date: 2023-05-23 14:56:38
 * @LastEditors: zhangchong zc16607@gmail.com
 * @LastEditTime: 2023-05-29 11:44:49
-->
<template>
  <div class="w-full p-5">
    
      <p class="text-lg font-bold mb-5">打包配置</p>
      <el-form :model="form" label-width="120px">
        <el-form-item label="项目根目录：">
          <el-cascader placeholder="需要打包的项目列表" class="w-full" :props="cascaderProps" v-model="form.rootDir"/>
        </el-form-item>
        <el-form-item label="输出目录：">
          <el-cascader placeholder="打包后保存的目录" class="w-full" :props="cascaderProps" v-model="form.outputDir"/>
        </el-form-item>
        <el-form-item label="是否压缩：">
            <el-radio-group v-model="form.compress">
              <el-radio :label="0">不压缩</el-radio>
              <el-radio :label="1">压缩为zip</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="打包后：">
          <el-checkbox v-model="form.openDir" label="打开所在文件夹" size="large" />
          <el-checkbox v-model="form.notifyMe" label="提醒我" size="large" />
          <el-checkbox v-model="form.openDD" label="打开钉钉" size="large" />
        </el-form-item>
      </el-form>


      <div class=" text-center my-5">
        <el-button @click="() => router.back()">取消</el-button>
        <el-button type="primary" @click="saveConfig">
          确定
        </el-button>
      </div>
  </div>

</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'

const form = ref({
  rootDir: '',
  outputDir: '',
  compress: '',
  openDir: '',
  notifyMe: '',
  openDD: ''
})

const cascaderProps = {
  checkStrictly: true, 
  lazy: true,
  lazyLoad(node, resolve) {
    let currentPath = ''
    if(node.level){
      currentPath = node.pathValues.join('/')+'/'
    }
    window.$api.getCurrentDir(currentPath).then(res => {
      resolve(res.map(dir => {
        return {
          label: dir,
          value: dir,
          leaf: false,
        }
      }))
    })
  },
}

const router = useRouter()

const saveConfig = () => {
  localStorage.setItem('config', JSON.stringify(form.value))
  router.push('/')
}

onMounted(() => {
  form.value = JSON.parse(localStorage.getItem('config')) || {
    rootDir: '',
    outputDir: '',
    compress: '',
    openDir: '',
    notifyMe: '',
    openDD: ''
  }
})
</script>